<template>
  <div>
    <h1>当水温到达六十 或者 水位到达八十给服务器发送请求</h1>
    <h3>水温-{{ newTemp }}</h3>
    <h3>水位-{{ newHeight }}</h3>
    <button @click="addTemp">水温+10</button>
    <button @click="addHeight">水位+10</button>
  </div>
</template>
<script setup lang="ts">
import { ref, watch, watchEffect } from "vue";

let newTemp = ref(0);
let newHeight = ref(0);

function addTemp() {
  newTemp.value += 10;
}
function addHeight() {
  newHeight.value += 10;
}

// 监视 -- watch实现，当你要监视的回调函数中用到了很多变量，那么你的数组就需要写很多变量，对于这种场景适用watchEffect是比较高效
/*watch([newTemp, newHeight], (val) => {
  let [temp, height] = val;
  console.log("最新的数据", val);
  if (temp >= 60 || height >= 80) {
    console.log("给服务器发送请求");
  }
});*/

// 监视 -- watchEffect实现, 只需要关注逻辑，不需要关注它用到的变量，它会自动监视你逻辑中用到的变量是否发生变化的
watchEffect(() => {
  if (newTemp.value >= 60 || newHeight.value >= 80) {
    console.log("给服务器发送请求!!");
  }
});
</script>

<style scoped></style>
